<template>
    <div class="view">
        <android-nav-bar title="现金积分提现" v-on:back="back"></android-nav-bar>
        <div class="box">
            <div class="withdrawal-box">
                <div class="title">提现金额</div>
                <div class="amount">
                    <span>￥&nbsp;&nbsp;</span>
                    <input type="number" v-model="amount">
                </div>
                <div class="withdrawal-type">
                    <cube-radio-group>
                        <div class="pay-type-item" @click="payType = '1'">
                            <svg class="pay-type-svg" aria-hidden="true">
                                <use xlink:href="#icon-weixin"></use>
                            </svg>
                            <div class="pay-type-text">
                                <span class="text">微信转账</span>
                                <span>{{user.wxpay===''?'暂未绑定':user.wxpay}}</span>
                            </div>
                            <cube-radio :option="{value:'2'}" v-model="payType" :hollowStyle="true"></cube-radio>
                        </div>
                        <div class="pay-type-item" @click="payType = '2'">
                            <svg class="pay-type-svg" aria-hidden="true">
                                <use xlink:href="#icon-zhifubao"></use>
                            </svg>
                            <div class="pay-type-text">
                                <span class="text">支付宝转账</span>
                                <span>{{user.alipay===''?'暂未绑定':user.alipay}}</span>
                            </div>
                            <cube-radio :option="{value:'1'}" v-model="payType" :hollowStyle="true"></cube-radio>
                        </div>
                    </cube-radio-group>
                </div>
                <!--                <div class="mine-bank-card" @click="toPage('mineBankCard')">查看我的银行卡</div>-->
                <div class="remark">
                    <cube-textarea v-model="remark" placeholder="注:提现手续费为8%,提现金额10元起,可在此处添加备注!"></cube-textarea>
                </div>
                <div class="withdrawal" @click="withdrawal">下一步</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";
    import DialogConfig from "@/constant/DialogConfig";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class MineMoneyWithdrawal extends Scene {
        private publicPath: string = process.env.BASE_URL;
        @State("UserStore")
        public user!: InterfaceUser;
        private amount: number | string = "";
        private payType: string = "";
        private remark: string = "";

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private withdrawal(): void {
            if (String(this.amount).slice(0, 1) == "0") {
                (<any> this).$createToast({
                    time: 1000,
                    type: "error",
                    txt: "提现金额有误",
                    mask: true
                }).show();
                return;
            } else if (String(this.amount).trim() == "" || this.amount <= 0) {
                (<any> this).$createToast({
                    time: 1000,
                    type: "error",
                    txt: "提现金额需大于0",
                    mask: true
                }).show();
                return;
            } else if ((Number(this.amount)) < 10) {
                (<any> this).$createToast({
                    time: 1000,
                    type: "error",
                    txt: "提现金额10元起",
                    mask: true
                }).show();
                return;
            } else if (Number(this.amount) > Number(this.user.money)) {
                (<any> this).$createToast({
                    time: 1000,
                    type: "error",
                    txt: "提交金额不能大于余额",
                    mask: true
                }).show();
                return;
            }
            console.log(this.payType);
            if (this.payType == "") {
                (<any> this).$createToast({
                    time: 1000,
                    type: "error",
                    txt: `请先选择转账方式!`,
                    mask: true
                }).show();
                return;
            }
            if (this.payType == "2" && this.user.wxpay=='') {
                const dialogConfig = new DialogConfig();
                (<any> this).$createDialog({
                    ...dialogConfig.withdrawalConfig({}),
                    onConfirm: () => {
                         this.toPage('mineWxpay');
                    }
                }).show();
                return;
            }
            if (this.payType == "1" && this.user.alipay=='') {
                const dialogConfig = new DialogConfig();
                (<any> this).$createDialog({
                    ...dialogConfig.withdrawalConfig({}),
                    onConfirm: () => {
                        this.toPage('mineAlipay');
                    }
                }).show();
                return;
            }
            let toast = (<any> this).$createToast({
                time: 0,
                txt: "提交中...",
                mask: true
            }).show();
            try {
                Http.post(this.api.userWithdraw, {amount: Number(this.amount), type: Number(this.payType), remark: this.remark}, {token: this.user.token}).then((res) => {
                    if (res.code == 1) {
                        toast = (<any> this).$createToast({
                            time: 2500,
                            txt: "提现申请成功",
                            mask: true,
                            onTimeout: () => {
                                this.navigateBack();
                            }
                        }).show();
                    } else {
                        this.globalSingleResultToast(res);
                    }
                });
            } catch (e) {
                toast.hide();
                console.log(e);
            }
        }

        private activated():void{

        }

        private mounted(): void {
            this.$nextTick(() => {
                this.payType = "";
            });
        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow: hidden;

        .box
            margin-top calc(var(--safe-area-inset-top) + 47px);
            height calc(100vh - var(--safe-area-inset-top) - 47px);

            &::before
                display table;
                content '';

            .withdrawal-box
                margin 20px auto;
                padding 15px;
                width 90vw;
                background-color #fff;
                border-radius 10px;

                .amount
                    padding 20px 0 10px 0;
                    font-size 22px;
                    text-align center;
                    border-bottom 1px solid $theme-line-color;

                    span
                        display inline-block;
                        width 30px;

                    input
                        display inline-block;
                        width calc(100vw - 70px - 30px);

                .withdrawal-type
                    border 1px solid $theme-line-color;
                    border-radius 10px;
                    margin-top 20px;
                    padding 15px;

                    >>>.cube-radio-group
                        &:before
                            display none;

                        &:after
                            display none;

                    .pay-type-item
                        height 60px;
                        padding 10px 0;
                        display flex;
                        justify-content space-between;
                        align-items center;
                        padding-right 10px;
                        font-size 15px;
                        position relative;

                        >>> .cube-radio
                            font-size 17px;

                        .pay-type-svg
                            width 33px;
                            height 33px;

                        .pay-type-text
                            padding-left 12px;
                            flex 1;
                            display flex;
                            flex-direction column;
                            font-size 11px;
                            color #999;
                            padding-right 20px;

                            .text
                                padding-bottom 3px;
                                font-size 16px;
                                color #333;
                                margin-bottom 2px;


                        >>> .cube-radio
                            padding 0;


                        .remark
                                    margin-top 15px;
                                    border 1px solid $theme-line-color;
                                    border-radius 10px;
                                    overflow hidden;

                                    .cube-textarea-wrapper
                                        height 80px;

                                        &::after
                                            display none;

                                .withdrawal
                                    color #fff;
                                    height 45px;
                                    line-height 45px;
                                    text-align center;
                                    border-radius 200px;
                                    margin 20px 30px;
                                    background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));



                .remark
                    margin-top 15px;
                    border 1px solid $theme-line-color;
                    border-radius 10px;
                    overflow hidden;

                    .cube-textarea-wrapper
                        height 80px;

                        &::after
                            display none;

                .withdrawal
                    color #fff;
                    height 45px;
                    line-height 45px;
                    text-align center;
                    border-radius 200px;
                    margin 20px 30px;
                    background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));

</style>
